.board {
    width: 600px;
    height: 488px;
	margin: 85px 0 0 93px;

	.board-space {
		clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
	}
}

.board-cont {
	display: inline-block;
	vertical-align: top;
	width: 670px;
	margin: 0 auto;
	margin-top: 20px;
}

.board-with-venus{
	background: url(./assets/board/mars.png) no-repeat;
}

.board-without-venus{
	background: url(./assets/board/mars-without-venus.png) no-repeat;
}

// // Not used yet.
// .board-with-pathfinders {
// 	width: 670px!;
// }

.board-legend {
	position: absolute;
	margin: -67px 0 0 -100px;
	z-index: 5;
	pointer-events: none
}

.board-caption {
	font-family: Tahoma,Verdana,Segoe,sans-serif;
	font-size: 10px;
	font-weight: bold;
	fill: white;
	pointer-events: none;
}

.board-line {
	stroke: white;
	stroke-width: 3;
	stroke-opacity: 0.3;
	pointer-events: none;
}

.board-space--available:hover {
	background: url(./assets/hex_green.png) !important;
	cursor: pointer;
}

.board-space-bonus {
	position: absolute;
    pointer-events: none;
    width: 16px;
    height: 16px;
    margin: 0 0 0 2px;
		border-radius: 2px;

  &.board-space-bonus-pos--only {
    margin: 15px 0 0 14px;
  }


	&.board-space-bonus-pos--1 {
		margin: 15px 0 0 5px;
	}

	&.board-space-bonus-pos--2 {
		margin: 15px 0 0 23px;
	}

	&.board-space-bonus-pos--3 {
		margin: 23px 0 0 14px;
	}
}

.board-space-bonus--plant {
	background: url(./assets/resources/plant.png);
	background-size: 16px;
}
.board-space-bonus--steel {
	background: url(./assets/resources/steel.png) no-repeat;
	background-size: 16px;
}
.board-space-bonus--titanium {
	background: url(./assets/resources/titanium.png) no-repeat;
	background-size: 16px;
}

.board-space-bonus--card {
	background: url(./assets/resources/card.png) no-repeat;
	background-size: 16px;
	height: 20px;
}

.board-space-bonus--heat {
	background: url(./assets/resources/heat.png) no-repeat;
	background-size: 16px;
}

.board-space-bonus--bonusocean {
    background: url(./assets/tiles/ocean.png), url(./assets/misc/hellas-ocean-cost.png);
    background-repeat: no-repeat, no-repeat;
    background-size: 21px, 12px;
    background-position: left, 23px;
    width: 35px;
    height: 24px;
}

.board-space-bonus--bonustemperature {
    background: url(./assets/board/bonus_temperature.png);
    background-repeat: no-repeat;
    background-size: 32px 21px;
    width: 36px;
    height: 21px;
    background-position: center;
    filter: saturate(1.5);
}

.board-space-bonus--bonustemperature4mc {
  background: url(./assets/board/bonus_temperature-4mc.png);
  background-repeat: no-repeat;
  background-size: 32px 21px;
  width: 36px;
  height: 21px;
  background-position: center;
  filter: saturate(1.5);
}

.board-space-bonus--colony {
  background: url(./assets/board/colony.png);
  background-repeat: no-repeat;
  background-size: 32px 21px;
  width: 36px;
  height: 21px;
  background-position: center;
  filter: saturate(1.5);
}

.board-space-bonus--microbe {
	background: url(./assets/resources/microbe.png) no-repeat;
	background-size: 16px;
}

.board-space-bonus--animal {
	background: url(./assets/resources/animal.png) no-repeat;
	background-size: 16px;
}

.board-space-bonus--data {
	background: url(./assets/resources/data.png) no-repeat;
	background-size: 16px;
}

.board-space-bonus--energy-production {
	background: url(./assets/pathfinders/energy-production.png) no-repeat;
	// The production box and viz border require a size change.
	background-size: 20px;
	width: 20px;
	height: 20px;
}

.board-space-bonus--energy {
	background: url(./assets/resources/power.png) no-repeat;
	background-size: 16px;
}

.board-space-bonus--science {
	background: url(./assets/resources/science.png) no-repeat;
	background-size: 16px;
}

.board-space-bonus--delegate {
	background: url(./assets/misc/delegate.png) no-repeat;
	background-size: 16px;
}

.board-space-tile--ocean {
	background: url(./assets/board_icons.png) -79px -29px no-repeat;
	width: 46px;
}

.board-space-tile--city {
	background: url(./assets/board_icons.png) -29px -29px no-repeat;
}

.board-space-tile--greenery {
	background: url(./assets/board_icons.png) -129px -29px no-repeat;
}

.board-space-tile--capital {
	background: url(./assets/board_icons.png) -198px -83px no-repeat;
}

.board-space-tile--mohole_area {
	background: url(./assets/board_icons.png) -438px -27px no-repeat;
}

.board-space-tile--commercial_district {
	background: url(./assets/board_icons.png) -486px -27px no-repeat;
}

.board-space-tile--ecological_zone {
	background: url(./assets/board_icons.png) -581px -27px no-repeat;
}

.board-space-tile--industrial_center {
	background: url(./assets/board_icons.png) -534px -27px no-repeat;
}

.board-space-tile--lava_flows {
	background: url(./assets/board_icons.png) -246px -27px no-repeat;
}

.board-space-tile--mining_area, .board-space-tile--mining_rights {
	background: url(./assets/board_icons.png) -294px -27px no-repeat;
}

.board-space-tile--natural_preserve {
	background: url(./assets/board_icons.png) -390px -27px no-repeat;
}

.board-space-tile--nuclear_zone {
	background: url(./assets/board_icons.png) -198px -27px no-repeat;
}

.board-space-tile--restricted_area {
	background: url(./assets/board_icons.png) -342px -27px no-repeat;
}

.board-space-tile--great_dam {
	background: url(./assets/board_icons.png) -581px -83px no-repeat;
}

.board-space-tile--deimos_down {
	background: url(./assets/board_icons.png) -487px -83px no-repeat;
}

.board-space-tile--magnetic_field_generators {
	background: url(./assets/board_icons.png) -535px -83px no-repeat;
}

.board-space-tile--new-holland {
	background: url("./assets/tiles/new_holland_board_tile.png");
	width: 44px;
	height: 50px;
	background-size: 44px, 50px;
}

.board-cube {
	position: absolute;
	width: 21px;
	height: 21px;
	z-index: 3;
	margin: 25px 0 0 15px;
	filter: drop-shadow(2px 2px 3px black);
}

// for The Moon
.board-cube-coOwner {
	position: absolute;
	width: 21px;
	height: 21px;
	z-index: 3;
	margin: 8px 0 0 4px;
	filter: drop-shadow(2px 2px 3px black);
}

.occupied-colony-space {
	position: absolute;
	background: rgba(0,0,0,0.7);
	width: 53px;
  height: 46px;
	z-index: 1;
}

.board-cube--red {
	background: url(./assets/board_icons.png) -24px -91px no-repeat;
}

.board-cube--blue {
	background: url(./assets/board_icons.png) -94px -91px no-repeat;
}

.board-cube--black {
	background: url(./assets/board_icons.png) -48px -91px no-repeat;
}

.board-cube--yellow {
	background: url(./assets/board_icons.png) -72px -91px no-repeat;
}

.board-cube--green {
	background: url(./assets/board_icons.png) -1px -91px no-repeat;
}

.board-cube--purple {
	background: url(./assets/board_icons.png) -118px -91px no-repeat;
}

.board-cube--orange {
	background: url(./assets/board_icons.png) -1px -117px no-repeat;
}

.board-cube--pink {
	background: url(./assets/board_icons.png) -24px -117px no-repeat;
}

.board-cube--bronze {
	background: url(./assets/board_icons.png) -142px -91px no-repeat;
}

// TODO(kberg): this only works at the moment because I've made the neutral cube bronze.
.board-cube--neutral {
	background: url(./assets/board_icons.png) -142px -91px no-repeat;
}

.overlay_base {
  position: absolute;
  font-size: 15px;
}

.board-cube--red.overlay::after {
  .overlay_base;
  content: "▲";
  margin-left: 3px;
  margin-top: -2px;
}

.board-cube--blue.overlay::after {
  .overlay_base;
  content: "+";
  margin-left: 7px;
  margin-top: -2px;
  font-size: 16px;
  font-weight: bold;
}

.board-cube--black.overlay::after {
  .overlay_base;
  content: "∇";
  margin-left: 5px;
  margin-top: 1px;
}

.board-cube--yellow.overlay::after {
  .overlay_base;
  content: "∗";
  margin-left: 4px;
  margin-top: -1px;
  font-weight: bold;
}

.board-cube--green.overlay::after {
  .overlay_base;
  content: "◆";
  margin-left: 5px;
  margin-top: -2px;
}

.board-cube--purple.overlay::after {
  .overlay_base;
  content: "◉";
  margin-left: 5px;
  margin-top: 0px;
  font-size: 13px;
}

.board-cube--orange.overlay::after {
  .overlay_base;
  content: "▢";
  margin-left: 5px;
  margin-top: 0px;
  font-size: 13px;
}

.board-cube--pink.overlay::after {
  .overlay_base;
  content: "◈";
  margin-left: 5px;
  margin-top: -2px;
}

.board-cube--bronze.overlay::after {
  .overlay_base;
  content: "▦";
  margin-left: 5px;
  margin-top: 3px;
  font-size: 9px;
}

.board-cube--neutral.overlay::after {
  .overlay_base;
  font-size: 13px;
  content: "★";
  margin-left: 4px;
  margin-top: 1px;
}

.board-outer-spaces {
	position: absolute;
}

.board-space {
	width: 46px;
	height: 51px;
	position: absolute;

	.board-space-text {
		font-size: 11px;
		font-weight: bold;
		line-height: 11px;
		text-align: center;
		position: absolute;
		margin: -25px 0 0 -20px;
		width: 88px;
	}

	&.board-space-69, &.board-space-70, &.board-space-71, &.board-space-72, &.board-space-73, &.board-space-75, &.board-space-76, &.board-space-77, &.board-space-78 {
		.board-space-text {
			margin-top: -15px;
		}
	}

	&.board-space-74 {
		.board-space-text {
			margin-top: -33px;
			font-size: 10px;
			line-height: 10px;
		}
	}

  .board-space-coords {
		font-size: 12px;
		font-weight: bold;
		text-align: center;
		position: absolute;
		padding: 8px 0 6px 0px;
		color: black;
		background-color: rgba(255, 255, 255, .6);
		clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	}

	.board-space-bonuses {
		position: absolute;
	}

	&.board-space--available {
		animation: board-tile-blink-animation 2s infinite;
		cursor: pointer;
	}

  .board-log-highlight {
		clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
		width: 46px;
		height: 51px;

    &.highlight {
      animation: board-tile-highlight-animation 1s infinite;
      cursor: pointer;
      background-color: white;
    }
  }
}

@keyframes board-tile-blink-animation {
	0% { filter: opacity(1)}
	49% { filter: opacity(1)}
	70% { filter: opacity(0.4)}
	99% { filter: opacity(0.4)}
	100% { filter: opacity(1)}
}

@keyframes board-tile-highlight-animation {
  0% { opacity: 1; }
  10% { opacity: 0; }
  20% { opacity: 1; }
  30% { opacity: 0; }
  40% { opacity: 0; }
  100% { opacity: 0; }
}

.board-space-type-land {
	background: url(./assets/hex_white.png) no-repeat;
}

.board-space-type-land-volcanic {
	background-image: url(./assets/hex_volcanic.png);
	background-color: #8303;
}

.board-space-type-land-noctis {
	background-color: #fff6;
}

.board-space-type-ocean {
	background: url(./assets/hex_blue.png) no-repeat;
	clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background-color: #0af4;
}

.board-space-type-cove {
	background: url(./assets/pathfinders/cove.png) no-repeat;
}

.board-space-type-volcanic-cove {
	background: url(./assets/pathfinders/volcanic-cove.png) no-repeat;
	background-color: #8304;
}

.board-space-type-deflection-zone {
	background: url(./assets/hex_white.png) no-repeat;
	clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background-color: rgba(251, 255, 16, 0.3);
  width: 100%; // Necessary for placing on top of existing tiles, to give a 'shield' appearance.
  height: 100%;
}

.board-ocean-checkmark{
	margin-left: 20px;
    margin-bottom: -1px;
}

.board-hidden-tile{
	opacity: 0.4;
}

.hide-tile-button-container {
	position: relative;
	width: 0px;
	height: 0px;

	.hide-tile-button {
		position: absolute;
		bottom: -500px;
		text-transform: uppercase;
		font-size: 12px;
		color: #e6e1e1;
		background: url(./assets/hex_white.png) no-repeat;
		background-color: #444;
		clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
		cursor: pointer;
		width: 46px;
		height: 51px;
		line-height: 12px;
		padding-top: 14px;
		text-align: center;
	}
}

.gagarin {
	&.visited {
		filter: brightness(.7)
	}
	position: absolute;
  margin: 7px 0 0 14px;
	background: url(./assets/pathfinders/gagarin.png);
	background-size: 16px;
	width: 16px;
	height: 9px;
}

.board-cube--cathedral {
	position: absolute;
  margin: 3px 0 0 14px;
	background: url(./assets/promo/cathedral.png);
	background-size: 20px;
	width: 20px;
	height: 20px;
}

.board-cube--nomad {
	position: absolute;
	background: linear-gradient(to bottom right, gold, goldenrod, gold);
	width: 15px;
	height: 15px;
	z-index: 3;
	margin: 8px 0 0 16px;
	border: 1px solid black;
}

@token_types:
	// nothing,
	card1, card2,
	corruption1, corruption2,
	data1, data2, data3,
	steel2, steel1production,
	titanium2, titanium1production,
	plant2, plant3, plant1production,
	titaniumandplant,
	energy1production, heat2production,
	microbe1, microbe2, tr, ocean,
	data1pertemp, microbe1pertemp, plant2pertemp, steel2pertemp, titanium1pertemp,
  mcprod1pertemp, microbe2pertemp,oceanrequirementmod,
  oxygenrequirementmod, temprequirementmod,
  steel2plant, energy2, sciencetag, planttag, volcanicoceanspace, place6mc,
  anyresource1;
each(@token_types, {
  .underground-token--@{value} {
    background-image: url("assets/underworld/underground-resource--@{value}.png");
  }
})

.underground-excavator {
	position: absolute;
	width: 21px;
	height: 21px;
	z-index: 3;
	margin: 7px 0 0 21px;
	filter: drop-shadow(2px 2px 3px black);
  transform: rotate(0.14turn);
}

// TODO(kberg): Replace with a different shape
.underground-excavator--red {
	background: url(./assets/board_icons.png) -24px -91px no-repeat;
}

.underground-excavator--blue {
	background: url(./assets/board_icons.png) -94px -91px no-repeat;
}

.underground-excavator--black {
	background: url(./assets/board_icons.png) -48px -91px no-repeat;
}

.underground-excavator--yellow {
	background: url(./assets/board_icons.png) -72px -91px no-repeat;
}

.underground-excavator--green {
	background: url(./assets/board_icons.png) -1px -91px no-repeat;
}

.underground-excavator--purple {
	background: url(./assets/board_icons.png) -118px -91px no-repeat;
}

.underground-excavator--orange {
	background: url(./assets/board_icons.png) -1px -117px no-repeat;
}

.underground-excavator--pink {
	background: url(./assets/board_icons.png) -24px -117px no-repeat;
}
